<template>
    <div class="job-list-root">
        <div class="top_cls">
            <div class="tab_cls">
                <p class="tab_text">{{brow}}</p>
                <div class="tab_active"></div>
            </div>
            <div v-if="readRest()" class="resume-title-red">试用期剩余使用时间：{{readRest()}}天</div>
        </div>
        <div class="job_list">
            <job class="job_item" v-bind:item="item" v-for="(item,index) in getJobList" v-bind:key="item.id"
                 :data-id="index"
                 @click-which="clickWitch"></job>
        </div>
    </div>
</template>

<script>
  import Job from './Job'

  export default {
    name: 'JobList',
    components: {
      job: Job
    },
    props: {
      brow: {
        type: String,
        default: ''
      },
      job_list: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    computed: {
      getJobList: function() {
        for (let i = 0; i < this.job_list.length; i++) {
          this.job_list[i].id = i
        }
        return this.job_list
      }
    },
    methods: {
      readRest() {
        let userInfo = JSON.parse(localStorage.getItem(localSaved.userInfo))
        this.platformUser = userInfo.platformUser
        return userInfo.company.probationPeriodTime
      },
      clickWitch: function(ops, sid) {
        //转发事件
        this.$emit('click-which', ops, sid)
      }
    }
  }
</script>

<style lang="scss" scoped>
    .job-list-root {
        display: flex;
        flex-direction: column;
    }

    .job_list {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .job_item {
        margin-top: 1px;
    }

    .top_cls {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 980px;
        height: 50px;
        background: rgba(255, 255, 255, 1);
        padding-left: 50px;
        margin-top: 20px;

        .resume-title-red {
            margin: 0 48px 0 0;
            font-size: 14px;
            font-weight: 400;
            color: #dd3a31;
            display: flex;
            align-items: center;
            position: absolute;
            height: 50px;
            right: 0;
        }
    }

    .tab_cls {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tab_text {
        font-size: 20px;
        font-weight: 400;
        height: 50px;
        margin: 0;
        line-height: 50px;
        color: rgba(51, 51, 51, 1);
    }

    .tab_active {
        width: 50px;
        height: 3px;
        background: rgba(255, 115, 0, 1);
        margin-top: -5px;
    }
</style>